<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    svg {
      border: solid 2px black;
    }
  </style>
  <body>
    <!-- keyTimes 整个变化时间的时间点 0-1 之间  -->
    <!-- keyTimes:0;0.5;1 -->
    <!-- values:100;200;300 -->
    <!-- calcMode:linear|discrete|paced|spline  设置动画曲线-->
    <!-- calcMode:spline 需要设置keySplines 和 keyPoints  -->
    <svg width="600" height="600" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- <rect id="MyRect" width="100" height="100" fill="red">
        <animate attributeName="x" from="0" to="500" dur="2s" keyTimes="0;0.8;1" values="0;100;500" id="rectAnimate" />
      </rect> -->
      <!-- keySplines: 设置动画曲线 几个关键帧间隔 就可以设置几个动画曲线 -->
      <!-- 使用by时 如果是by=50  那么它都会每次从0开始变化 使用accumulate时 如果设置为sum 那么它就会从上次结束的地方开始变化 如果设置为none 那么它就会每次从0开始变化 -->
      <!-- additive 不常用 -->
      <rect id="MyRect" width="100" height="100" fill="red">
        <animate attributeName="x" from="0" to="500" dur="2s" keyTimes="0;0.8;1" values="0;100;500" id="rectAnimate" calcMode="spline" keySplines="0.2 0.2 0.8 1;0.42 0 0.58 1" />
      </rect>
    </svg>
  </body>
</html>
